<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <div style="height: 200px;background:#dc1">
          111
        </div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px;background:#fa1adc">
          222
        </div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px;background:#acde45">
          333
        </div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px;background:#3acc09">
          444
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="chart" style="height: 600px" ref="chart"></div>
      </el-col>
      <el-col :span="12">
        <baidu-map class="map" dragging scroll-wheel-zoom center="合肥" :zoom="15">
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        </baidu-map>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'DashBoard',
  data () {
    return {
      myChart: null
    }
  },
  methods: {
    initChart () {
      this.myChart = echarts.init(this.$refs.chart)
      // 调用setOption绘制图表
      this.myChart.setOption({
        title: {
          text: 'ECharts 入门示例',
          textStyle: {
            color: 'red'
          }
        },
        backgroundColor: '#fcf5a7',
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        color: ['#ac4567', '#5678ac'],
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '销售额',
            type: 'line',
            smooth: true,
            data: [12, 25, 6, 56, 10, 33]
          }
        ]
      })
    }
  },
  mounted () {
    this.initChart()
  }
}
</script>

<style lang="scss" scoped>
.map{
  width: 100%;
  height: 600px;
}
</style>
